<template>
<html>
  <body>
    <Head></Head>

    <!--
	作者：xzx19950624@qq.com
	时间：2018-07-15
	描述：顶部标题
    -->
    <BlogHead></BlogHead>

    <article>
      <!--banner begin-->
      <div class="picsbox">
        <FirstRecommend></FirstRecommend>
        <!--banner end-->

        <!-- 二级推荐 -->
        <div class="toppic">
          <li v-for="item in secondData" :key="item.uid" @click="goToInfo(item.uid)">
            <a href="javascript:void(0);">
              <i>
                <img :src="PICTURE_HOST + item.photoList[0]">
              </i>
              <h2>{{item.title}}</h2>
              <span>{{item.blogSort.sortName}}</span>
            </a>
          </li>
        </div>
      </div>
      <div class="blank"></div>

      <!--blogsbox begin-->
      <div class="blogsbox">
        <div
          v-for="item in newBlogData"
          :key="item.uid"
          class="blogs"
          data-scroll-reveal="enter bottom over 1s"
        >
          <h3 class="blogtitle">
            <a href="javascript:void(0);" @click="goToInfo(item.uid)">{{item.title}}</a>
          </h3>
          <span class="blogpic">
            <a href="javascript:void(0);" @click="goToInfo(item.uid)" title>
              <img v-if="item.photoList" :src="PICTURE_HOST + item.photoList[0]" alt>
            </a>
          </span>
          <p class="blogtext">{{item.summary}}</p>
          <div class="bloginfo">
            <ul>
              <li class="author">
                <a href="javascript:void(0);" @click="goToAuthor(item.author)">{{item.author}}</a>
              </li>
              <li class="lmname" v-if="item.blogSort">
                <a
                  href="javascript:void(0);"
                  @click="goToList(item.blogSort.uid)"
                >{{item.blogSort.sortName}}</a>
              </li>
              <li class="timer">{{item.createTime}}</li>
              <li class="view">
                <span>{{item.clickCount}}</span>
              </li>
              <li class="like">{{item.collectCount}}</li>
            </ul>
          </div>
        </div>

        <div class="isEnd">
          <!-- <span v-if="!isEnd">正在加载中~</span> -->

          <div class="loadContent" @click="loadContent" v-if="!isEnd&&!loading">点击加载更多</div>

          <div class="lds-css ng-scope" v-if="!isEnd&&loading">
            <div style="width:100%;height:100%" class="lds-facebook">
              <div></div>
              <div></div>
              <div></div>
            </div>
          </div>

          <span v-if="isEnd">我也是有底线的~</span>
        </div>
      </div>
      <!--blogsbox end-->

      <div class="sidebar">

        <!--标签云-->
        <TagCloud></TagCloud>

        <!--关注我们-->
        <FollowUs></FollowUs>


        <!-- 三级推荐 -->
        <ThirdRecommend></ThirdRecommend>
        
        <!--四级推荐-->
        <FourthRecommend></FourthRecommend>

        <!--点击排行-->
        <HotBlog></HotBlog>

        <Link></Link>


      </div>
    </article>

    <!--
	作者：xzx19950624@qq.com
	时间：2018-07-15
	描述：博客底部
    -->
    <BlogFooter></BlogFooter>

    <!--返回顶部-->
    <CdTop></CdTop>
  </body>
</html>
</template>

<script>
import Head from "../components/Head";
import BlogHead from "../components/BlogHead";
import BlogFooter from "../components/BlogFooter";
import FirstRecommend from "../components/FirstRecommend";
import ThirdRecommend from "../components/ThirdRecommend";
import FourthRecommend from "../components/FourthRecommend";
import TagCloud from "../components/TagCloud";
import HotBlog from "../components/HotBlog";
import FollowUs from "../components/FollowUs";
import Link from "../components/Link";
import CdTop from "../components/CdTop";
import {
  getBlogByLevel,
  getNewBlog,
  getHotBlog,
  getHotTag,
  recorderVisitPage
} from "../api/index";
export default {
  name: "index",
  components: {
    //注册组件
    BlogHead,
    BlogFooter,
    FirstRecommend,
    FourthRecommend,
    ThirdRecommend,
    TagCloud,
    HotBlog,
    FollowUs,
    Link,
    Head,
    CdTop
  },
  data() {
    return {
      PICTURE_HOST: process.env.PICTURE_HOST,
      firstData: [], //；一级推荐数据
      secondData: [], //；二级级推荐数据
      thirdData: [], //三级推荐
      fourthData: [], //四级推按
      newBlogData: [], //最新文章
      hotBlogData: [], //最热文章
      hotTagData: [], //最新标签
      keyword: "",
      currentPage: 1,
      pageSize: 15,
      total: 0, //总数量
      isEnd: false, //是否到底底部了
      loading: false //是否正在加载
    };
  },
  mounted() {
    // 注册scroll事件并监听
    var that = this;
    that.loading = false;
    // window.addEventListener("scroll", function() {
    //   let scrollTop = document.documentElement.scrollTop; //当前的的位置
    //   let scrollHeight = document.documentElement.scrollHeight; //最高的位置
    //   console.log(scrollTop);
    //   if (scrollTop >= 0.6 * scrollHeight && !that.isEnd && !that.loading) {
    //     that.loading = true;
    //     that.currentPage = that.currentPage + 1;
    //     var params = new URLSearchParams();
    //     params.append("currentPage", that.currentPage);
    //     params.append("pageSize", that.pageSize);
    //     getNewBlog(params).then(response => {
    //       if (response.code == "success" && response.data.records.length > 0) {
    //         that.isEnd = false;
    //         var newData = that.newBlogData.concat(response.data.records);
    //         that.newBlogData = newData;
    //         that.total = response.data.total;
    //         that.pageSize = response.data.size;
    //         that.currentPage = response.data.current;
    //       } else {
    //         that.isEnd = true;
    //       }
    //       that.loading = false;
    //     });
    //   }
    // });
  },
  created() {
    var secondParams = new URLSearchParams();
    secondParams.append("level", 2);
    getBlogByLevel(secondParams).then(response => {
      this.secondData = response.data.records;
    });

    console.log("测试地址", this.PICTURE_HOST)

    // 获取最新博客
    this.newBlogList();

    var params = new URLSearchParams();
    params.append("pageName", "INDEX");
    recorderVisitPage(params).then(response => {});
  },
  methods: {
    //跳转到文章详情
    goToInfo(uid) {
      let routeData = this.$router.resolve({
        path: "/info",
        query: { blogUid: uid }
      });
      window.open(routeData.href, "_blank");
    },

    //跳转到搜索详情页
    goToList(uid) {
      let routeData = this.$router.resolve({
        path: "/list",
        query: { sortUid: uid }
      });
      window.open(routeData.href, "_blank");
    },

    //跳转到搜索详情页
    goToAuthor(author) {
      let routeData = this.$router.resolve({
        path: "/list",
        query: { author: author }
      });
      window.open(routeData.href, "_blank");
    },

    //最新博客列表
    newBlogList() {
      var params = new URLSearchParams();
      params.append("currentPage", this.currentPage);
      params.append("pageSize", this.pageSize);
      getNewBlog(params).then(response => {
        if (response.code == "success") {
          this.newBlogData = response.data.records;
          this.total = response.data.total;
          this.pageSize = response.data.size;
          this.currentPage = response.data.current;
        }
      });
    },

    loadContent: function() {
      var that = this;
      that.loading = false;
      that.currentPage = that.currentPage + 1;
      var params = new URLSearchParams();
      params.append("currentPage", that.currentPage);
      params.append("pageSize", that.pageSize);
      getNewBlog(params).then(response => {
        if (response.code == "success" && response.data.records.length > 0) {
          that.isEnd = false;
          var newData = that.newBlogData.concat(response.data.records);
          that.newBlogData = newData;
          that.total = response.data.total;
          that.pageSize = response.data.size;
          that.currentPage = response.data.current;

          //全部加载完毕
          if (newData.length < that.pageSize) {
            that.isEnd = true;
          }
        } else {
          that.isEnd = true;
        }
        that.loading = false;
      });
    }
  }
};
</script>

<style>
.isEnd {
  float: left;
  width: 100%;
  height: 80px;
  text-align: center;
}

.ng-scope {
  margin: 0 auto;
  width: 18%;
  height: 10%;
}

.loadContent {
  width: 120px;
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  margin: 0 auto;
  color: aliceblue;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.8);
}

@keyframes lds-facebook_1 {
  0% {
    top: 0px;
    height: 200px;
  }
  50% {
    top: 80px;
    height: 40px;
  }
  100% {
    top: 80px;
    height: 40px;
  }
}
@-webkit-keyframes lds-facebook_1 {
  0% {
    top: 0px;
    height: 200px;
  }
  50% {
    top: 80px;
    height: 40px;
  }
  100% {
    top: 80px;
    height: 40px;
  }
}
@keyframes lds-facebook_2 {
  0% {
    top: 20px;
    height: 160px;
  }
  50% {
    top: 80px;
    height: 40px;
  }
  100% {
    top: 80px;
    height: 40px;
  }
}
@-webkit-keyframes lds-facebook_2 {
  0% {
    top: 20px;
    height: 160px;
  }
  50% {
    top: 80px;
    height: 40px;
  }
  100% {
    top: 80px;
    height: 40px;
  }
}
@keyframes lds-facebook_3 {
  0% {
    top: 40px;
    height: 120px;
  }
  50% {
    top: 80px;
    height: 40px;
  }
  100% {
    top: 80px;
    height: 40px;
  }
}
@-webkit-keyframes lds-facebook_3 {
  0% {
    top: 40px;
    height: 120px;
  }
  50% {
    top: 80px;
    height: 40px;
  }
  100% {
    top: 80px;
    height: 40px;
  }
}
.lds-facebook {
  position: relative;
}
.lds-facebook div {
  position: absolute;
  width: 20px;
}
.lds-facebook div:nth-child(1) {
  left: 40px;
  background: #1d0e0b;
  -webkit-animation: lds-facebook_1 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  animation: lds-facebook_1 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}
.lds-facebook div:nth-child(2) {
  left: 90px;
  background: #774023;
  -webkit-animation: lds-facebook_2 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  animation: lds-facebook_2 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}
.lds-facebook div:nth-child(3) {
  left: 140px;
  background: #d88c51;
  -webkit-animation: lds-facebook_3 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  animation: lds-facebook_3 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}
.lds-facebook {
  width: 90px !important;
  height: 90px !important;
  -webkit-transform: translate(-45px, -45px) scale(0.45) translate(45px, 45px);
  transform: translate(-45px, -45px) scale(0.45) translate(45px, 45px);
}
</style>
